import QtQuick 2.0
import QtQuick.Controls

Component{
    id:devicePage

    Item {
        id:devicePageItem
        anchors.fill: background

        signal syncDevicePage()

        Rectangle{//设备界面上方返回键以及页面名称 添加设备按钮
            id:deviceTopBar
            width: parent.width
            height: parent.height / 10
            anchors.left: parent.left
            anchors.top: parent.top
            color:"transparent"
            Image{
                id:devicePageReturnImg
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                source: "qrc:/icon/icon/m_back.svg"
                MouseArea{
                    anchors.fill: parent
                    onClicked:{
                        rootStackView.pop(devicePage)
                    }
                }
            }

            Text{
                anchors.left: devicePageReturnImg.right
                anchors.verticalCenter: parent.verticalCenter
                text: "我的设备"
                color: textColor
                font.pixelSize: 20
            }
            Image{
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                source: "qrc:/icon/icon/m_add.svg"
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        addDevicePopup.open()
                    }
                }
            }
        }
        function select(index) {
            for (var i = 0; i < deviceRoomListModel.count; i++) {
                deviceRoomListModel.setProperty(i, "selected", false);
            }
            deviceRoomListModel.setProperty(index, "selected", true);
        }

        Rectangle{//房间选择列表
            id:deviceRoomChooseRec
            width: parent.width - 100
            height: parent.height / 10
            anchors.top: deviceTopBar.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            color:"transparent"
            clip: true

            ListView{
                id: listView
                anchors.fill: parent
                spacing: 20
                orientation:ListView.Horizontal

                model: RoomList{}
                delegate: Button{
                    width: 80
                    height: 40

                    Text {
                        anchors.centerIn: parent
                        text: qsTr(deviceRoomName)
                        color: textColor
                    }

                    onClicked: {
                        select(index)
                        // 加载对应的页面
                        deviceLoader.source = deviceRoomPage
                    }

                    background: Rectangle {
                        color: selected ? "white" : "transparent"
                        radius: 10
                    }
                }
            }
        }

        Loader{//设备界面
            id:deviceLoader
            width: parent.width
            height: parent.height / 5 * 4
            anchors.top: deviceRoomChooseRec.bottom
            clip: true
            sourceComponent: RoomDeviceListPage{}
        }
        Popup {
            id: addDevicePopup
            width: 400
            height: 400
            modal: true


            contentItem: Rectangle {
                width: 400
                height: 400
                color: "white"

                Text {
                    id:hintPopupText
                    text: "请选择要添加的设备"
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                Button{
                    id:addDeviceBtn
                    width: 100
                    height: 50
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    signal addDeviceSig()
                    onClicked:{
                        addDeviceSig()
                    }
                    Connections{
                        target: addDeviceBtn
                        function onAddDeviceSig(){                                                                           {
                                deviceListModel.append({
                                                           deviceName: "传感器",
                                                           deviceState: "在线",
                                                           deviceIcon: "qrc:/icon/icon/m_device.svg"
                                                       })
                                console.log("添加成功")
                                syncDevicePage()
                                addDevicePopup.close()
                            }
                        }
                    }
                }
            }
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
            anchors.centerIn: parent

            background: Rectangle {
                color: "white" // 设置为透明
                radius: 20
            }
        }
        DeviceList{
            id:deviceListModel
        }
        RoomList{
            id:deviceRoomListModel
        }
    }
}
